<template>
  <div :class="{ 'search-container' : isSimple, 'white' : isSimple, }">
    <div :class="{ 'search-container-main' : isSimple, 'white' : isSimple }">
      <el-form
        ref="queryForm"
        :inline="true"
        label-position="top"
        :rules="rules"
      >
        <div class="search-container-main-pop" :class="{ 'white' : isSimple }">
          <from-item
            ref="fromItemRef"
            :form-data="searchData"
            auto
          >
            <template slot-scope="scope">
              <slot
                :data="scope.data"
              />
            </template>
            <template slot="end">
              <el-form-item>
                <label class="el-form-item__label btn_right" v-html="nbsp" />
                <el-button
                  type="primary"
                  @click="search"
                >{{ $t('common.query') }}
                </el-button>
                <el-button @click="resetSelect">{{ $t('common.reset') }}</el-button>
              </el-form-item>
            </template>
          </from-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import 'element-ui/lib/theme-chalk/base.css'
import FromItem from '@/components/DataForm/formItem'
export default {
  name: 'PopDataSelect',
  components: {
    FromItem
  },
  props: {
    searchData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rules: {
      type: Object,
      default: null
    },
    isSimple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      size: 'medium',
      nbsp: '&nbsp;'
    }
  },
  created() {
  },
  mounted() {
    // this.search();
  },
  methods: {
    // 查询
    search() {
      const params = this.$refs.fromItemRef.getAllParams()
      this.$emit('return-search', params)
    },
    focus(name) {
      this.$refs.fromItemRef.focus(name)
    },
    blur(name) {
      this.$refs.fromItemRef.blur(name)
    },
    select(name) {
      this.$refs.fromItemRef.select(name)
    },
    resetSelect() {
      this.$refs.fromItemRef.resetAllField()
      this.$emit('return-reset')
    }
  }
}
</script>
<style lang="scss" scoped>
.btn_right {
  margin-bottom: 3px;
}
.app-container .search-container .white{
  background-color: #FFFFFF;
}
.app-container .search-container .search-container-main .white{
  background-color: #FFFFFF;
}
</style>
